<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 01 */
    .container01 {
      width: 300px;
      border: 1px solid black;
      padding: 10px;
    }
    .box {
      background: lightblue;
      padding: 10px;
      margin-top: 10px;
    }
    /* 02 */
    .container02 {
      width: 1000px;
      border: 1px solid black;
      padding: 10px;
      height: 100px;
    }
    .left {
      width: 30%;
      float: left;
      background: lightblue;
      padding: 10px;
    }
    .right {
      width: 65%;
      float: right;
      background: lightcoral;
      padding: 10px;
    }

    .text-container {
      margin-top: 10px;
      width: 300px;
      border: 1px solid black;
      padding: 10px;
    }
    .float-img {
      width: 200px;
      height: 80px;
      float: left;
      margin-right: 10px;
    }
    /* 03 */
    .relative-box03 {
      position: relative;
      top: 20px;
      left: 0px;
      background: lightblue;
      padding: 0px;
    }

    .container03 {
      position: relative;
      width: 200px;
      height: 100px;
      background: lightgray;
    }
    .absolute-box03 {
      position: absolute;
      top: 25px;
      right: 30%;
      background: tomato;
      padding: 15px;
    }

    .fixed-box03 {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background: gold;
      padding: 10px;
    }

    .sticky-container03 {
      height: 700px;
      overflow-y: scroll;
      background: lightgray;
    }
    .sticky-box03 {
      position: sticky;
      top: 0;
      background: lightgreen;
      padding: 10px;
    }
    /* 04 */
    .flex-container04 {
      display: flex;
      background: lightgray;
      flex-direction: row; /* 默认 row */
    }
    .box04 {
      width: 50px;
      height: 50px;
      background: steelblue;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px;
    }
    /* 05 */
    .grid-container05 {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px;
      gap: 10px;
      background: lightgray;
    }
    .grid-item05 {
      background: steelblue;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 06 */
    .multi-column05 {
      column-count: 3; /* 设置 3 列 */
      column-gap: 20px; /* 设置列间距 */
    }

    .multi-column06 {
      column-count: 3;
      column-gap: 20px;
      column-rule: 1px solid black; /* 设置列边框 */
      column-width: 200px; /* 设置最小列宽 */
    }
  </style>
  <body>
    <h1>01普通流布局：</h1>
    <span>普通流是网页的默认布局方式，元素按照 HTML 代码顺序从上到下、从左到右排列。</span>
    <div class="container01">
      <p>这是第一段文本。</p>
      <p>这是第二段文本，默认情况下，它会出现在第一段的下方。</p>
      <div class="box">这是一个块级 div，它会占据整行。</div>
      <span>这是一个行内元素 span，它不会独占整行。</span>
      <span>这是另一个 span，它会紧跟在上一个 span 之后。</span>
    </div>

    <h1>-----------------------------------------------------------------</h1>

    <h1>02浮动布局：</h1>
    <span>浮动布局主要用于 实现左右栏布局，但随着 Flexbox 和 Grid 的流行，浮动已较少用于页面整体布局，更多用于 文字环绕图片 等小型排版场景。</span>
    <div class="container02">
      <div class="left">左侧栏</div>
      <div class="right">右侧内容</div>
    </div>

    <div class="text-container">
      <img src="./img/002.jpg" class="float-img" />
      <p>这是一段文本，它会环绕浮动的图片，使得排版更加紧凑。</p>
    </div>

    <h1>-----------------------------------------------------------------</h1>
    <h1>03定位布局：</h1>
    <h3>相对定位（relative）相对自身原始位置偏移（不脱离文档流）</h3>
    <div class="box03 relative-box03">相对定位</div>

    <h3>-----------------------------------------------------------------</h3>

    <h3>绝对定位（absolute）脱离文档流，不影响其他元素。相对于最近的 relative 祖先元素定位，若无，则相对 body。</h3>
    <div class="container03">
      <div class="box03 absolute-box03">绝对定位</div>
    </div>

    <h3>-----------------------------------------------------------------</h3>

    <h3>固定定位（fixed）脱离文档流，相对视口定位，不随页面滚动变化。常用于 固定导航栏、返回顶部按钮 等。</h3>
    <div class="fixed-box03">固定定位</div>

    <h3>-----------------------------------------------------------------</h3>

    <h3>粘性定位（sticky）在滚动到 top: 0 时变成 fixed，否则保持 relative。常用于 表头固定、导航栏固定 等。</h3>
    <div class="sticky-container03">
      <div class="sticky-box03">粘性定位</div>
    </div>

    <h1>-----------------------------------------------------------------</h1>
    <h1>04flexbox布局：</h1>
    <span>
      Flexbox（Flexible Box）布局是一种 一维布局模型，用于 在一个轴（水平或垂直）上 高效地排列元素，常用于导航栏、卡片布局、响应式设计等场景。
      <br />1. Flexbox 关键概念 Flexbox 由两个核心部分组成： 容器（Flex 容器）：使用 display: flex; 定义的父元素。 子项（Flex 项目）：容器内的所有直接子元素。 <br />2. Flex容器属性 : <br />（1） <br />display: flex / inline-flex display: flex; 让元素成为 Flex 容器，内部子元素变成弹性项。
      <br />display: inline-flex; 让容器表现为 行内块级元素（但内部仍然是 Flex）。 <br />（2） <br />flex-direction（主轴方向） 主轴决定了子项如何排列： <br />row（默认） 从左到右（主轴为横向） row-reverse 从右到左（主轴为横向，顺序反转） <br />column 从上到下（主轴为纵向） column-reverse
      从下到上（主轴为纵向，顺序反转）。
    </span>
    <div class="flex-container04">
      <div class="box04">1</div>
      <div class="box04">2</div>
      <div class="box04">3</div>
    </div>

    <h1>-----------------------------------------------------------------</h1>
    <h1>05Grid布局：</h1>
    <span>
      Grid（网格布局）是 CSS 的强大二维布局，适用于 复杂页面布局，能在 水平（行）和垂直（列） 方向上同时控制元素。<br />
      Grid 布局由 两部分 组成：<br />
      网格容器（Grid 容器）：使用 display: grid; 定义的父元素。<br />
      网格项（Grid 项目）：容器内的所有直接子元素。<br />
    </span>

    <div class="grid-container05">
      <div class="grid-item05">1</div>
      <div class="grid-item05">2</div>
      <div class="grid-item05">3</div>
    </div>
    <span>结果：grid-template-columns: 100px 100px 100px; 定义 3 列（每列 100px 宽）。 grid-template-rows: 50px 50px; 定义 2 行（每行 50px）。 gap: 10px; 行列间距 10px。 </span>

    <h1>-----------------------------------------------------------------</h1>
    <h1>06多列布局</h1>
    <span>多列布局（Multi-Column Layout）是 CSS 的一种布局方式，可以在一个容器内创建多列文本或内容，并让浏览器自动管理列宽和换行。它常用于新闻、杂志、博客排版，可以轻松实现报纸式的排版效果。 </span>
    <!-- 1. 关键属性
    多列布局主要依赖 column-count 和 column-width 来定义列数和列宽。
    
    属性	         作用
    column-count	指定列数，浏览器自动计算列宽
    column-width	指定最小列宽，浏览器根据容器宽度动态调整列数
    column-gap	  设置列间距（默认 1em）
    column-rule	  设置列之间的分割线
    column-span	  控制元素是否跨列
    break-inside	控制内容如何换列（avoid 可避免换列） -->
    <h3>（1）固定列数：column-count</h3>
    <h3>-----------------------------------------------------------------</h3>
    <div class="multi-column05">
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
    </div>
    <!-- 
    ✅ 特点：
            列数固定，列宽自适应。
            适合定制化排版（如杂志、新闻页）。 -->

    <h3>（2）固定列宽：column-width</h3>
    <h3>-----------------------------------------------------------------</h3>
    <div class="multi-column06">
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
      <p>它可以让文本均匀分布到多个列中，像报纸一样...</p>
    </div>
    <!-- 
    ✅ 特点：
            列宽固定，列数自适应。
            适合响应式设计（如博客、文章）。 
    -->
    <script src="./index.js"></script>
  </body>

</html>
